<template>
  <el-card shadow="never">
    <template #header>
      <span>系统设置</span>
    </template>
    <el-form label-position="top" :model="form">
      <el-form-item label="API Key">
        <el-input v-model="form.apiKey" type="password" show-password />
      </el-form-item>
      <el-form-item label="后端 Base URL">
        <el-input v-model="form.baseUrl" placeholder="默认 /api" />
      </el-form-item>
      <el-form-item label="默认 Top K">
        <el-input-number v-model="form.topK" :min="1" :max="10" />
      </el-form-item>
      <el-form-item label="默认 Temperature">
        <el-slider v-model="form.temperature" :min="0" :max="1" :step="0.1" show-input />
      </el-form-item>
      <div class="actions">
        <el-button type="primary" @click="save">保存配置</el-button>
        <el-button type="danger" @click="reset">清空 API Key</el-button>
      </div>
    </el-form>
  </el-card>
</template>

<script setup>
import { reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { useConfigStore } from '@/stores/config';

const config = useConfigStore();
config.loadFromStorage();

const form = reactive({
  apiKey: config.apiKey,
  baseUrl: config.baseUrl,
  topK: config.topK,
  temperature: config.temperature
});

function save() {
  config.setApiKey(form.apiKey);
  config.baseUrl = form.baseUrl;
  config.setTopK(form.topK);
  config.setTemperature(form.temperature);
  config.persist();
  ElMessage.success('配置已保存');
}

function reset() {
  config.reset();
  form.apiKey = '';
  ElMessage.success('已清空 API Key');
}
</script>

<style scoped>
.actions {
  display: flex;
  gap: 12px;
}
</style>
